<template>
  <div>
    <Nav :title="$route.name"></Nav>
    <div class="container">
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="contact.linkMan"
            :rules="[
              {
                required: true,
                message: '必须输入姓名',
              },
            ]"
            label="姓名"
            placeholder="请输入收货人姓名"
          />

          <van-field
            type="tel"
            v-model="contact.mobile"
            label="手机号码"
            placeholder="收货人手机号码"
            :rules="[{ pattern: /\d{11}/, message: '请输入11位手机号' }]"
          />
          <van-field
            label="地区"
            :value="areaStr"
            @click-input="showArea = true"
            readonly
            placeholder="选择省/市/区"
            :rules="[{  message: '请选择省市区',required:true }]"
          />
          <van-field
            v-model="contact.address"
            rows="1"
            autosize
            label="详细地址"
            type="textarea"
            placeholder="请填写详细地址"
            :rules="[{  message: '详细地址不能为空',required:true }]"
          />

          <van-field
            v-model="contact.code"
            type="digit"
            label="邮政编码"
            maxlength="6"
          />
          <van-cell center title="设为默认地址">
            <template #right-icon>
              <van-switch v-model="contact.isDefault" size="24" />
            </template>
          </van-cell>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            primary
            block
            type="info"
            color="linear-gradient(-90deg,#ff8f00,#f50 97%)"
            native-type="submit"
            >保存并使用</van-button
          >
        </div>
      </van-form>
      <van-popup
        v-model="showArea"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-area
          @confirm="choseArea"
          @cancel="showArea = false"
          title="选择省市区"
          :area-list="areaList"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { fetchAddress } from '_api'
import { getToken } from '_utils/token.js'
import Nav from '../../components/Nav.vue'
import { areaList } from '@vant/area-data'
import { Toast } from 'vant'
export default {
  components: { Nav },
  data () {
    return {
      areaStr: '',
      areaList, // 省市区数据
      checked: false,
      showArea: false,
      contact: {
        linkMan: '',
        mobile: '',
        provinceId: '',
        cityId: '',
        address: '',
        code: '',
        isDefault: ''
      }
    }
  },
  methods: {
    // 添加地址
    onSubmit () {
      fetchAddress({
        ...this.contact,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success({
            message: '添加成功',
            onClose: () => {
              this.$router.replace('/orderAddList')
            }
          })
        }
      })
    },
    choseArea (params) {
      console.log(params)
      const areaStrs = []
      params.forEach(item => {
        areaStrs.push(item.name)
      })
      this.areaStr = areaStrs.join('/')
      this.contact.provinceId = params[0].code // 省code
      this.contact.cityId = params[1].code // 市code
      this.showArea = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-top: 1.226667rem;
}
</style>
